const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // 指定打包的模式，打包的时候就没有警告了
  mode: 'production',
  // 入口配置
  entry: './src/main.js',
  // 出口配置
  output: {
    // 输出到哪个目录
    path: path.resolve(__dirname, 'dist'),
    // 打包后的js文件名
    filename: 'bundle.js',
  },
  // 插件
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  // 配置加载器的
  module: {
    // 配置哪些加载器(加载器的规则写在数组内)
    rules: [
      {
        // test 匹配 css 结尾的文件，
        // $ 表示结尾
        // i 忽略大小写
        test: /\.css$/i,
        // use表示使用什么加载器
        use: ['style-loader', 'css-loader'],
        // 💥use的加载器书写有要求：从右往左运行加载器
        // 💥先通过 css-loader 把 css 类型的文件编译处理，再通过 style-loader 把css写入到页面中
      },
      // 处理 less 文件类型的加载器规则
      {
        test: /\.less$/i,
        // 使用less-loader, 让webpack处理less文件, 内置还会用less翻译less代码成css内容
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
      {
        // 同时匹配 png|jpg|gif|jpeg 结尾的文件
        test: /\.(png|jpg|gif|jpeg)$/i,
        // webpack5的资源模块，自动根据 8kb 大小转换成 base64 或者自接复制过去并改名
        type: 'asset',
      },
      {
        // 同时匹配 eot|svg|ttf|woff|woff2 结尾的文件
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        // 当做静态资源直接输出即可(直接复制到输出的文件夹并改名了)
        type: 'asset/resource',
        // 生成到哪里
        generator: {
          // 生成的文件名
          //    [name]     原来的文件名
          //    [hash:6]   六位哈希值
          //    [ext]      后缀名
          filename: 'font/[name].[hash:6][ext]',
        },
      },
      {
        // 同时匹配 js 结尾的文件
        test: /\.js$/,
        // 排除 node_modules|bower_components 两个文件夹
        exclude: /(node_modules|bower_components)/,
        // 使用什么加载器
        use: {
          // 使用 babel-loader 加载器
          loader: 'babel-loader',
          // 加载器选项
          options: {
            // 预设:转码规则(用bable开发环境本来预设的)
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
}
